"use server";
import { getQuestionBankVoByIdUsingGet } from "@/api/questionBankController";
import QuestionList from "@/components/QuestionList";
import { Avatar, Button, Card } from "antd";
import Meta from "antd/es/card/Meta";
import Paragraph from "antd/es/typography/Paragraph";
import Title from "antd/es/typography/Title";
import "./index.css";

interface Params {
  questionBankId: string;
}
/**
 * 题库详情页面
 * @returns 题库详情页面
 */
const BankDetailPage: React.FC<{ params: Params }> = async ({ params }) => {
  const { questionBankId } = await params;

  let bankDetail: API.QuestionBankVO = {};

  let total: number = 0;

  let pageParams = {
    current: 1,
    pageSize: 10,
    sortField: "createTime",
    sortOrder: "descend",
  };

  try {
    const res = await getQuestionBankVoByIdUsingGet({
      id: Number(questionBankId),
      needQueryQuestionList: true,
      ...pageParams,
    });
    bankDetail = res.data as API.QuestionBankVO;
    total = res.data.questionPage.total;
  } catch (e: any) {
    // messageApi.error("获取题目列表失败" + e.message);
  }
  // 第一题
  let firstQuestionId = null;

  if (bankDetail) {
    if (
      bankDetail.questionPage?.records &&
      bankDetail.questionPage.records.length > 0
    ) {
      firstQuestionId = bankDetail.questionPage?.records?.[0].id;
    }
  }

  return (
    <div id="questionBacnk-detail-page" className="max-width-content">
      <Card style={{ marginBottom: 20 }}>
        <Meta
          avatar={<Avatar src={bankDetail.picture} size={72} />}
          title={<Title level={3}>{bankDetail.title}</Title>}
          description={
            <>
              <Paragraph ellipsis={true} type="secondary">
                {bankDetail.description}
              </Paragraph>
              <Button
                type="primary"
                shape="round"
                href={`/bank/${questionBankId}/question/${firstQuestionId}`}
                target="_blank"
                disabled={!firstQuestionId}
              >
                开始刷题
              </Button>
            </>
          }
        />
      </Card>
      <QuestionList
        questionList={bankDetail.questionPage?.records ?? []}
        cardTitle={`题库列表，共${total}条`}
        questionBankId={Number(questionBankId)}
      ></QuestionList>
    </div>
  );
};
export default BankDetailPage;
